<%--
  Created by IntelliJ IDEA.
  User: dzw
  Date: 2018/3/20
  Time: 17:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<style>
  table p{
    margin: 10px 0;
    height: 17px;
    line-height: 17px;
    border-bottom: 1px solid #c3c2c2;
    text-align: right;
    padding-right: 5px;
  }
  table td{
    vertical-align: middle !important;
  }
  table a{
    color: #346edc;
  }
  .statDiv{
    height: 300px;
  }

  #det-nav{
    font-weight: bold;
  }
</style>

<div id="page-content">
  <div class="row">
    <div class="col-lg-12">
      <div class="panel">
        <div class="panel-heading">
          <ul class="nav nav-tabs" id="det-nav">
            <li class="active"><a href="#s1" id="tab1" data-toggle="tab">学历-全区</a></li>
            <li class=""><a href="#s2" id="tab2" data-toggle="tab">年龄性别-全区</a></li>
            <li class=""><a href="#s3" id="tab3" data-toggle="tab">政治面貌-全区</a></li>
            <li class=""><a href="#s4" id="tab4" data-toggle="tab" data-streetId="${firstStreetId}">学历-街道</a></li>
            <li class=""><a href="#s5" id="tab5" data-toggle="tab" data-streetId="${firstStreetId}">年龄性别-街道</a></li>
            <li class=""><a href="#s6" id="tab6" data-toggle="tab" data-streetId="${firstStreetId}">政治面貌-街道</a></li>

            <button id="backToDet" class="btn btn-primary pull-right" style="display: none;margin: 4px 4px 0 0 ">返回</button>
          </ul>
        </div>
        <div class="panel-body">
          <div class="tab-content">

            <div class="tab-pane fade in active" id="s1">

              <table class="table table-bordered table-condensed">
                <thead>
                <tr>
                  <th colspan="3">统计项</th>
                  <th>人数</th>
                  <th>比例</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td rowspan="${fn:length(list)}"><a href="javascript:void(0)" onclick="toStatistics('eduAll')">学历-全区</a></td>
                  <td rowspan="${fn:length(list)}"><a href="javascript:void(0)" onclick="toStatistics('eduAll')">主任</a></td>

                  <c:forEach items="${list}" var="item" varStatus="index">
                  <c:if test="${index.index!=0}"><tr></c:if>
                    <td><a href="javascript:void(0)" onclick="toStatistics('eduAll')">${item.eduName}</a></td>
                    <td class="text-right"><a href="javascript:void(0)" onclick="toStatistics('eduAll')">${item.personCount}</a></td>
                    <td class="text-right"><a href="javascript:void(0)" onclick="toStatistics('eduAll')">${item.bili}</a></td>
                  </tr>
                  </c:forEach>
                </tr>

                <tr>
                  <td colspan="3"><a href="javascript:void(0)" onclick="toStatistics('eduAll')">合计</a></td>
                  <td class="text-right"><a href="javascript:void(0)" onclick="toStatistics('eduAll')">${num}</a></td>
                  <td></td>
                </tr>
                </tbody>
              </table>

            </div>

            <div class="tab-pane fade" id="s2"></div>
            <div class="tab-pane fade" id="s3"></div>
            <div class="tab-pane fade" id="s4"></div>
            <div class="tab-pane fade" id="s5"></div>
            <div class="tab-pane fade" id="s6"></div>

          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<script>

  //学历 - 全区
  $("#tab1").off("click").on("click", function(){
    if($("#quPie").size()>0){
      loadURL("<%=path%>/com/director/eduAll",$("#page-content"))
    }
  });

  //年龄性别 - 全区
  $("#tab2").off("click").on("click", function(){
    loadURL("<%=path%>/com/director/ageAll",$("#s2"))
  });

  //人员性质 - 全区
  $("#tab3").off("click").on("click", function(){
    loadURL("<%=path%>/com/director/personNatureAll",$("#s3"))
  });

  //学历 - 街道
  $("#tab4").off("click").on("click", function(){
    var sid = $(this).attr("data-streetId");
    loadURL("<%=path%>/com/director/eduAll?streetId="+sid,$("#s4"))
  });

  //年龄性别 - 街道
  $("#tab5").off("click").on("click", function(){
    var sid = $(this).attr("data-streetId");
    loadURL("<%=path%>/com/director/ageAll?streetId="+sid,$("#s5"))
  });

  //人员性质 - 街道
  $("#tab6").off("click").on("click", function(){
    var sid = $(this).attr("data-streetId");
    loadURL("<%=path%>/com/director/personNatureAll?streetId="+sid,$("#s6"))
  });

  //进入 学历-全区 统计图页面
  function toStatistics(urlName){
    loadURL("<%=path%>/com/dirStat/"+urlName,$("#s1"));
  }

  $("#backToDet").off("click").on("click", function(){
    $("#det-nav>.active>a").trigger("click");
    $(this).hide();
  });

</script>
